<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-upload</title>
    <script src="/ajax/day02/jquery-1.9.0.js"></script>
    <script>
        function doUpload1() {
            // 原生的ajax上传文件

            let xhr = new XMLHttpRequest();
            xhr.onload = function(){
                if(xhr.status == 200){
                    console.log('responseText:', xhr.responseText);
                    // 业务处理
                    document.getElementById("m1").src = xhr.responseText;
                }
            };

            // 监听文件上传进度
            xhr.upload.onprogress = function(event){
                console.log('event:', event);
                /**
                 *  lengthComputable: 表示进度信息是否可用
                 *  loaded 表示已上传的数据大小
                 *  total 表示总数据大小
                 */
                if(event.lengthComputable){
                    let p = Math.round(event.loaded*100/event.total);
                    console.log(p);
                    document.getElementById("progress").value = p;
                    document.getElementById("showProgress").innerText = p + "%";

                }
            };

            // 上传文件不需要设置请求头
            // xhr.open("post", "/ajax/day03/upload.php");
            xhr.open("post", "http://localhost/ajax/day03/upload.php");
            // 传入的参数类型 必须是 FormData
            
            // 方式1: 直接把 form对象作为构造函数的参数
            // let form = document.getElementById("f1");
            // let fd = new FormData(form);

            // 方式2:
            let fd = new FormData();
            // append 追加参数, 第一个是参数名, 第二个是参数值
            fd.append("username", document.querySelector("input[name='username']").value);
            let fileInput = document.querySelector("input[name='file']");
            console.log('fileInput:', fileInput);
            console.log('value:', fileInput.value);// 不是文件本身, 是文件名
            console.log(fileInput.files);// 文件本身
            fd.append("file", fileInput.files[0]);// 取出第一个文件
            xhr.send(fd);
        }
        function doUpload2() {
            let form = document.getElementById("f2");
            let fd = new FormData(form);
            // jquery的ajax上传文件
            $.ajax({
                url: '/ajax/day03/upload.php',
                type: 'post',
                data: fd,
                dataType: 'text',
                // 上传文件时, 额外添加的属性
                processData: false,
                contentType: false,
                // 监听文件上传进度
                xhr: function(){
                    var myxhr = $.ajaxSettings.xhr();
                    myxhr.upload.onprogress = function(event){
                        console.log('event:', event);
                        /**
                         *  lengthComputable: 表示进度信息是否可用
                         *  loaded 表示已上传的数据大小
                         *  total 表示总数据大小
                         */
                        if(event.lengthComputable){
                            let p = Math.round(event.loaded*100/event.total);
                            console.log(p);
                            document.getElementById("progress2").value = p;
                            document.getElementById("showProgress2").innerText = p + "%";
                        }
                    };
                    // 必须返回当前的ajax对象, 否则无法发送请求
                    return myxhr;
                }
            }).done((result)=>{
                console.log('result:', result);
            }).fail((jqXhr, textStatus, errorThrown)=>{
                console.log(jqXhr, textStatus, errorThrown);
            });
        }
    </script>
</head>
<body>
    <h2>原生ajax</h2>
    <form id="f1" >
        <div>
            <label>上传者: <input type="text" name="username" ></label>
        </div>
        <div>
            <label>文件: <input type="file" name="file" ></label>
            <progress id="progress" value="0" max="100" ></progress>
            <span id="showProgress" >0%</span>
        </div>
        <div>
            <input type="button" value="上传" onclick="doUpload1()" >
        </div>
    </form>
    <div>预览:
        <img id="m1" style="width: 400px;" src="" alt="no image">
    </div>
    <hr>
    <h2>jquery-ajax</h2>
    <form id="f2" >
        <div>
            <label>上传者: <input type="text" name="username" ></label>
        </div>
        <div>
            <label>文件: <input type="file" name="file" ></label>
            <progress id="progress2" value="0" max="100" ></progress>
            <span id="showProgress2" >0%</span>
        </div>
        <div>
            <input type="button" value="上传" onclick="doUpload2()" >
        </div>
    </form>

</body>
</html>